<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Layui</title>
    <link rel="stylesheet" th:href="@{/pear/component/luminar/css/luminar.css}">
    <style>
        .badge {
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
        }

        .container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 20px;
        }

        .box1 {
            border: 1px solid #009688;
            margin-right: 20px;
            width: 50%;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            background-size: 100% 100%; /* 确保背景图覆盖整个容器 */
            background-position: center; /* 确保背景图居中 */
            height: 500px;
        }

        .box2 {
            width: 46%;
            padding: 35px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .image-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .image-item {
            flex: 1;
            margin-right: 10px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .image-item img {
            width: 100%;
            height: 150px;
            display: block;
        }

        .image-item:last-child {
            margin-right: 0;
        }

        .image-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .report-btn {
            background-color: #007bff; /* 蓝色背景 */
            color: white; /* 白色文字 */
            border: none; /* 无边框 */
            padding: 6px 12px; /* 内边距减小 */
            font-size: 14px; /* 字体大小减小 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
            border-radius: 5px; /* 圆角 */
            transition: background-color 0.3s; /* 背景颜色过渡效果 */
            margin-left: 30px;
        }

        .report-btn:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>

<body>
<div class="container">
    <div class="box1" id="box1">
        <div>
            <h1 style="text-align: center" id="formName"></h1>
        </div>
        <div id="testdemo" style="width:60%;margin: 30px auto;padding: 30px;">
        </div>
    </div>
    <div class="box2">
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <h1>表单背景图样式选择</h1>
            <button class="report-btn" lay-event="save">保存样式</button>
        </div>
        <div class="layui-tab layui-tab-brief" style="width:100%">

            <ul class="layui-tab-title">
                <li class="layui-this">科技风格</li>
                <li>简约风格</li>
                <li>教育风格</li>
                <li>节日风格</li>
                <li>更多</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="image-row">
                        <div class="image-item"><img
                                src="https://p5.itc.cn/q_70/images01/20211126/ee113fc4cac748ec801cf8854572287b.png"
                                alt="科技"></div>
                        <div class="image-item"><img
                                src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%2756eR5oqA6IOM5pmv5Zu%2BXzE3Mjc1NTUyMjQuOTI5ODcx%27/0.png"
                                alt="Image 2"></div>
                        <div class="image-item"><img
                                src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%2756eR5oqA6IOM5pmv5Zu%2BXzE3Mjc1NTUyMjQuOTI5ODcxXzE3Mjc1NTUyMjUuNjk1MDAyM18xNzI3NTU1MjI2LjQwMDIxXzE3Mjc1NTUyMjcuMDIyMzg3M18xNzI3NTU1MjI3LjI1NzY3NDdfMTcyNzU1NTIyNy45NDUwNTU1%27/5.png"
                                alt="Image 3"></div>
                    </div>
                    <div class="image-row">
                        <div class="image-item"><img
                                src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%2756eR5oqA6IOM5pmv5Zu%2BXzE3Mjc1NTUyMjQuOTI5ODcxXzE3Mjc1NTUyMjUuNjk1MDAyM18xNzI3NTU1MjI2LjQwMDIxXzE3Mjc1NTUyMjcuMDIyMzg3M18xNzI3NTU1MjI3LjI1NzY3NDdfMTcyNzU1NTIyNy45NDUwNTU1XzE3Mjc1NTUyMjguMzg1NDgxXzE3Mjc1NTUyMjkuMDIxODI5%27/7.png"
                                alt="Image 4"></div>
                        <div class="image-item"><img
                                src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%2756eR5oqA6IOM5pmv5Zu%2BXzE3Mjc1NTUyMjQuOTI5ODcxXzE3Mjc1NTUyMjUuNjk1MDAyM18xNzI3NTU1MjI2LjQwMDIxXzE3Mjc1NTUyMjcuMDIyMzg3M18xNzI3NTU1MjI3LjI1NzY3NDdfMTcyNzU1NTIyNy45NDUwNTU1XzE3Mjc1NTUyMjguMzg1NDgxXzE3Mjc1NTUyMjkuMDIxODI5XzE3Mjc1NTUyMzAuMDA5ODM5NQ%3D%3D%27/8.png"
                                alt="Image 5"></div>
                        <div class="image-item"><img
                                src="https://preview.qiantucdn.com/58pic/3q/UK/vl/fe/w9ubsm0kfq73865hglayd1cip4njzrvo_PIC2018_png_aiys_PIC2018.jpg%21w1024_new_small_1"
                                alt="Image 6"></div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="image-row">
                        <div class="image-item"><img
                                src="https://img1.baidu.com/it/u=3492141843,3132946615&fm=253&fmt=auto&app=120&f=JPEG?w=473&h=285"
                                alt="Image 7"></div>
                        <div class="image-item"><img
                                src="https://img2.baidu.com/it/u=2299357603,3136927233&fm=253&fmt=auto?w=500&h=375"
                                alt="Image 8"></div>
                        <div class="image-item"><img
                                src="https://img1.baidu.com/it/u=1550516953,2109718875&fm=253&fmt=auto&app=138&f=JPEG?w=677&h=482"
                                alt="Image 9"></div>
                    </div>
                    <div class="image-row">
                        <div class="image-item"><img src="https://t8.baidu.com/it/u=4208753498,3118721866&fm=193"
                                                     alt="Image 10"></div>
                        <div class="image-item"><img
                                src="https://img2.baidu.com/it/u=595120124,2109276244&fm=253&fmt=auto&app=138&f=JPEG?w=585&h=249"
                                alt="Image 11"></div>
                        <div class="image-item"><img
                                src="https://img0.baidu.com/it/u=3588663593,1953680910&fm=253&fmt=auto&app=138&f=PNG?w=585&h=249"
                                alt="Image 12"></div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="image-row">
                        <div class="image-item"><img
                                src="https://img1.baidu.com/it/u=3138156148,1398060564&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=300"
                                alt="Image 10"></div>
                        <div class="image-item"><img
                                src="https://pic.rmb.bdstatic.com/bjh/27fb8b194b521ab235070f57ea463213.jpeg"
                                alt="Image 11"></div>
                        <div class="image-item"><img
                                src="https://img1.baidu.com/it/u=4228945019,1441825031&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400"
                                alt="Image 12"></div>
                    </div>
                    <div class="image-row">
                        <div class="image-item"><img src="https://pic.616pic.com/bg_w1180/00/00/84/iPlgSUe7pU.jpg"
                                                     alt="Image 10"></div>
                        <div class="image-item"><img
                                src="https://n.sinaimg.cn/sinakd20109/300/w1620h1080/20220812/5944-560e6e9e900ac2cb5e402edcf66c2e4e.jpg"
                                alt="Image 11"></div>
                        <div class="image-item"><img
                                src="https://img2.baidu.com/it/u=522571393,1580917870&fm=253&fmt=auto&app=138&f=JPEG?w=798&h=400"
                                alt="Image 12"></div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="image-row">
                        <div class="image-item"><img
                                src="http://img1.baidu.com/it/u=3933312384,4104418069&fm=253&app=138&f=JPEG?w=1423&h=800"
                                alt="Image 13"></div>
                        <div class="image-item"><img
                                src="https://img1.baidu.com/it/u=504850413,2405791626&fm=253&fmt=auto&app=138&f=JPEG?w=1423&h=800"
                                alt="Image 14"></div>
                        <div class="image-item"><img
                                src="https://img1.baidu.com/it/u=3620187071,4199592640&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400"
                                alt="Image 15"></div>
                    </div>
                    <div class="image-row">
                        <div class="image-item"><img
                                src="https://img2.baidu.com/it/u=883219210,3275948332&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=400"
                                alt="Image 13"></div>
                        <div class="image-item"><img
                                src="https://img0.baidu.com/it/u=2262458858,3869152022&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=475"
                                alt="Image 14"></div>
                        <div class="image-item"><img
                                src="https://img1.baidu.com/it/u=3224366595,71371218&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400"
                                alt="Image 15"></div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="image-row" style="display: flex">
                        <div class="layui-upload-drag" style="display: block;width:100%" id="ID-upload-demo-drag">
                            <i class="layui-icon layui-icon-upload"></i>
                            <div>点击上传，或将文件拖拽到此处</div>
                            <div class="layui-hide" id="ID-upload-demo-preview" style="">
                                <hr>
                                <img id="img" src="" alt="上传成功后渲染" style="max-width: 100%;height:195px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="getFormData" style="display: none;">
    <textarea class="site-demo-text" id="get-form-data"></textarea>
</div>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/luminar/luminar.js}"></script>
<script th:src="@{/pear/component/luminar/js/Sortable/Sortable.js}"></script>
<script th:src="@{/pear/component/luminar/js/iceEditor/iceEditor.js}"></script>

<script th:inline="javascript">
    let baseURL = /*[[@{/}]]*/ '';
    let formId = parent.formId
    let demos = [];
    //JavaScript代码区域
    layui.use(['formDesigner', 'form', 'layer', 'upload', 'element'], function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let upload = layui.upload;
        let index = layui.index;
        let formDesigner = layui.formDesigner;
        let form = layui.form;
        let element = layui.element;
        let render;
        let imageList = []
        let fileList = []
        let background = '';
        upload.render({
            elem: '#ID-upload-demo-drag',
            url: baseURL + 'workflow/form/uploadImg',
            done: function (res) {
                if (res.code === 1000) { // 假设服务器返回的res.code为0表示成功
                    document.getElementById('img').src = baseURL + res.data; // 设置图片路径
                    document.getElementById('ID-upload-demo-preview').classList.remove('layui-hide'); // 显示图片
                    layer.msg('上传成功');
                    console.log(res);
                    background = res.data
                    var imgSrc = baseURL + background; // 假设res.data是图片路径
                    console.log(imgSrc)
                    $('#box1').css({
                        'backgroundImage': 'url(' + imgSrc + ')',
                        'backgroundSize': '100% 100%', // 覆盖整个容器
                        'backgroundPosition': 'center', // 居中显示
                        'backgroundRepeat': 'no-repeat' // 不重复
                    }); // 设置背景图
                } else {
                    layer.msg('上传失败');
                }
            }
        });
        // 监听保存按钮的点击事件
        document.querySelector('.report-btn').addEventListener('click', function () {
            let formId = parent.formId;
            $.ajax({
                url: baseURL + "workflow/form/saveFormStyle",
                data: {
                    formId: formId,
                    background: background
                },
                type: 'post',
                success: function (result) {
                    if (result.code === 1000) {
                        layer.msg("背景样式保存成功", function () {
                            parent.layer.close(parent.layer.getFrameIndex(window
                                .name)); //关闭当前页
                            parent.layui.table.reload("form-table");
                        })
                    } else {
                        layer.msg("保存失败")
                    }
                }

            })
        });
        // 为所有图片项添加点击事件
        $('.image-item').on('click', function () {
            background = $(this).find('img').attr('src');
            $('#box1').css({
                'backgroundImage': 'url(' + background + ')',
                'backgroundSize': '100% 100%', // 覆盖整个容器
                'backgroundPosition': 'center', // 居中显示
                'backgroundRepeat': 'no-repeat' // 不重复
            }); // 设置背景图
        });
        if (parent.fieldData !== undefined) {
            $('#formName').text(parent.formName)
            demos = JSON.parse(parent.fieldData);
            render = formDesigner.render({
                elem: '#testdemo',
                data: demos,
                viewOrDesign: true,
            });

            let images = render.getImages();
            let iList = []
            for (let i = 0; i < images.length / 2; i++) {
                let obj = {}
                obj['' + images[i].select] = []
                iList.push(obj)
            }
            let v = new Array(images.length / 2).fill(0);
            for (let i = 0; i < images.length / 2; i++) {
                upload.render({
                    elem: '#' + images[i].select,
                    url: baseURL + 'workflow/formData/uploadImg',
                    data: {
                        formId: formId
                    },
                    size: 500,
                    acceptMime: 'image/jpeg, image/png,image/webp',
                    multiple: true,
                    number: 3,
                    before: function (obj) {
                        layer.msg('图片上传中...', {
                            icon: 16,
                            shade: 0.01,
                            time: 0
                        })
                    },
                    done: function (res) {
                        layer.close(layer.msg());//关闭上传提示窗口
                        if (res.code === 1000) {
                            //上传完毕
                            $('#uploader-list-' + images[i].select.replace("image", "")).append(
                                `
                                <div class="file-iteme"  style="position: relative;padding: 5px">
                                    <span class="layui-badge badge " id="file-item-${v[i]++}">x</span></li>
                                    <div class="handle">
                                        <i class="layui-icon layui-icon-delete"></i>
                                    </div>
                                    <img style="width: 100px; height: 100px;" src="${baseURL}${res.data}" alt="Image">
                                </div>
                            `
                            );
                            let o = images[i].select
                            iList[i][o].push(res.data)
                            imageList = iList
                            for (let j = 0; j < v[i]; j++) {
                                $('#uploader-list-' + images[i].select.replace("image", "") + ' #file-item-' + j).on('click', function () {
                                    $(this).parent().remove();
                                    iList[i][o][j] = ""
                                });
                            }
                            return
                        }
                        return layer.msg(res.msg, {icon: 2, time: 2000});
                    }
                });
            }


            let filesData = render.getFiles();
            let fList = []
            for (let i = 0; i < filesData.length / 2; i++) {
                let obj = {}
                obj['' + filesData[i].select] = []
                fList.push(obj)
            }

            for (let i = 0; i < filesData.length / 2; i++) {
                let uploadListIns = upload.render({
                    elem: '#' + filesData[i].select
                    , elemList: $('#list-' + filesData[i].select.replace("file", "")) //列表元素对象
                    , url: baseURL + 'workflow/formData/uploadFile'
                    , data: {formId: formId}
                    , accept: 'file'
                    , exts: 'zip|rar|pdf|xlsx'
                    , size: 200 * 1024
                    , multiple: true
                    , number: 3
                    , auto: false
                    , bindAction: '#listAction-' + filesData[i].select.replace("file", "")
                    , choose: function (obj) {
                        let that = this;
                        let files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        obj.preview(function (index, file, result) {
                            let tr = $(['<tr id="upload-' + index + '">'
                                , '<td>' + file.name + '</td>'
                                , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                                , '<td id="lps-' + index + '"><span id="lps-span-' + index + '" style="display:none;color: red;">1</span><div class="layui-progress"  lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                                , '<td>'
                                , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                , '</td>'
                                , '</tr>'].join(''));

                            //单个重传
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                                $('#lps-span-' + index).hide()
                                return false
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function () {
                                let spanValue = tr.children().find('span').first().text(); //获取上传状态
                                if (spanValue === '') {
                                    let fileName = tr.children().first().text();
                                    for (let j = 0; j < fList[i][filesData[i].select].length; j++) {
                                        let t = fList[i][filesData[i].select][j].split("/").pop().split("_").pop()
                                        if (t === fileName) {
                                            fList[i][filesData[i].select].splice(j, 1)
                                        }
                                    }
                                    fList[i][filesData[i].select].indexOf(fileName)
                                    fileList = fList
                                }
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                return false
                            });
                            that.elemList.append(tr);
                            element.render('progress'); //渲染新加的进度条组件
                        });
                    }
                    , done: function (res, index, upload) { //成功回调
                        let that = this;
                        if (res.code === 1000) { //上传成功
                            delete this.files[index]; //删除文件队列已经上传成功的文件
                            $('#lps-span-' + index).text('')
                            let o = filesData[i].select
                            fList[i][o].push(res.data)
                            fileList = fList
                            return;
                        }
                        this.error(index, upload, res.msg);
                    }
                    , allDone: function (obj) { //多文件上传完毕后的状态回调
                        console.log(obj)
                    }
                    , error: function (index, upload, msg) { //错误回调
                        let that = this;
                        let tr = that.elemList.find('#upload-' + index)
                            , tds = tr.children();
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                        $('#lps-span-' + index).show()
                        $('#lps-span-' + index).text(msg + '.')
                        element.progress('progress-demo-' + index, 0 + '%');
                    }
                    , progress: function (n, elem, e, index) {
                        element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
                    }
                });
            }


        }


        //监听提交
        form.on('submit(demo1)', function (data) {
            let formData = render.getFormData();
            if (imageList.length > 0) {
                // 处理数据，移除空字符串
                formData.imgFile = imageList.map(item => {
                    const key = Object.keys(item)[0]; // 获取键名
                    const filteredArray = item[key].filter(url => url.trim() !== ''); // 移除空字符串
                    return {[key]: filteredArray}; // 返回新的对象
                });
            }
            if (fileList.length > 0) {
                formData.files = fileList;
            }
            let signs = render.getSign()
            if (signs.length > 0) {
                formData.signs = signs;
            }
            console.log(formData)
            let jsonString = JSON.stringify(formData);
            let temp = {
                "formId": formId,
                "formData": jsonString
            }
            let loading = layer.msg('正在提交...', {
                icon: 16,
                shade: 0.01,
                time: 0
            });
            $.ajax({
                url: baseURL + 'workflow/formData/addFormData',
                data: JSON.stringify(temp),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 1000) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                },
                error: function () {
                    layer.close(loading);
                    layer.msg('服务器错误，请稍后再试！', {
                        icon: 2,
                        time: 1000
                    });
                }
            });
            return false;
        });

    });

    const tabs = document.querySelectorAll('.tab');
    const images = document.querySelectorAll('.image-container');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');

            images.forEach(img => img.classList.remove('active'));
            document.getElementById(tab.dataset.tab).classList.add('active');
        });
    });
</script>
</body>

</html>
